<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学生</title>

    <script>
      // 页面打开 如果未登录就回登录页面 
      // 上个页面登录成功时 在本地存了一个token 用这个来判断
      // 如果本地有token就是登录成功的 没有就是未登录 就返回登录页面
  
      // 如果token的值为空就返回登录页面
      if (localStorage.getItem('user-token') === null) {
        location.href = 'login.html'
      }
      </script>
      
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/student.css" />
  </head>
  <body class="application application-offset">
    <div class="container-fluid container-application">
      <div class="sidenav show" id="sidenav-main">
        <!-- Sidenav header -->
        <div class="sidenav-header d-flex align-items-center">
          <a class="navbar-brand" href="./index.html">
            <span class="logo">·ITCAST·</span>
          </a>
        </div>
        <!-- User mini profile -->
        <div class="sidenav-user d-flex flex-column align-items-center justify-content-between text-center">
          <!-- Avatar -->
          <div>
            <a href="#" class="avatar rounded-circle avatar-xl">
              <img alt="Image placeholder" src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg" class="" />
            </a>
            <div class="mt-5">
              <h5 class="mb-0 text-white">黑马前端</h5>
              <span class="d-block text-sm text-white opacity-8 mb-3">数据可视化</span>
              <a href="javascript:;" class="btn btn-sm btn-white btn-icon rounded-pill shadow hover-translate-y-n3">
                <span class="btn-inner--text">学前端来黑马</span>
              </a>
            </div>
          </div>
        </div>
        <!-- Application nav -->
        <div class="nav-application clearfix">
          <a href="./index.html" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-house bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">首页</span>
          </a>
          <a href="./student.html" class="btn btn-square text-sm active">
            <span class="btn-inner--icon d-block"><i class="bi bi-people bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">学生</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-columns bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">排版</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-files bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">资料</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-receipt bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">就业</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-gear bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">设置</span>
          </a>
        </div>
        <!-- Misc area -->
        <div class="card bg-gradient-warning">
          <div class="card-body">
            <h5 class="text-white">哈喽, 朋友!</h5>
            <p class="text-white mb-4">为什么不现在开始学习前端，创造一些令人惊叹的东西呢？</p>
            <a href="http://itcast.cn" class="btn btn-sm btn-block btn-white rounded-pill" target="_blank">Get started</a>
          </div>
        </div>
      </div>
      <div class="main-content position-relative">
        <nav class="navbar navbar-main navbar-expand-lg navbar-dark navbar-border" id="navbar-main">
          <div class="container-fluid">
            <!-- Navbar nav -->
            <div class="collapse navbar-collapse navbar-collapse-fade" id="navbar-main-collapse">
              <ul class="navbar-nav align-items-lg-center">
                <!-- Home  -->
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 首页 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 传智教育 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 黑马程序员 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 文档 </a>
                </li>
              </ul>
              <!-- Right menu -->
              <ul class="navbar-nav ml-lg-auto align-items-center d-none d-lg-flex">
                <li class="nav-item dropdown dropdown-animate">
                  <a class="nav-link pr-lg-0" href=".dropdown-menu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <div class="media media-pill align-items-center">
                      <span class="avatar rounded-circle">
                        <img alt="Image placeholder" src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg" />
                      </span>
                      <div class="ml-2 d-none d-lg-block">
                        <span class="mb-0 text-sm font-weight-bold">Admin</span>
                      </div>
                    </div>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" id="logout" href="javascript:;"> 退出 </a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <div class="page-content">
          <div class="page-title mb-3">
            <div class="row justify-content-between align-items-center">
              <div class="col-md-6 mb-3 mb-md-0">
                <h5 class="h3 font-weight-400 mb-0 text-white">Students</h5>
                <span class="text-sm text-white opacity-8">一共有 <b class="total">0</b> 位学员</span>
              </div>
              <div class="col-md-6 d-flex align-items-center justify-content-between justify-content-md-end">
                <a id="openModal" href="javascript:;" class="btn btn-sm btn-white btn-icon-only rounded-circle ml-4">
                  <span class="btn-inner--icon"><i class="bi bi-plus bi-2x"></i></span>
                </a>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="card card-fluid">
                <div class="table-responsive" style="min-height: 1000px">
                  <table class="table align-items-center">
                    <thead>
                      <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>组号</th>
                        <th>期望薪资</th>
                        <th>就业薪资</th>
                        <th>籍贯</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody class="list">
                      <!-- <tr>
                      <td>张杰</td>
                      <td>20</td>
                      <td>男</td>
                      <td>第2组</td>
                      <td>10000</td>
                      <td>13000</td>
                      <td>北京北京市东城区</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
                      </td>
                    </tr> -->
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <!-- footer -->
          <div class="footer pt-5 pb-4 footer-light" id="footer-main">
            <div class="row text-center text-sm-left align-items-sm-center">
              <div class="col-sm-6">
                <p class="text-sm mb-0">© 2022 <a href="https://itcast.cn" class="h6 text-sm" target="_blank">前端学科</a>. All rights reserved.</p>
              </div>
              <div class="col-sm-6 mb-md-0">
                <ul class="nav justify-content-center justify-content-md-end">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Support</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Terms</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link pr-0" href="#">Privacy</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- add Modal -->
    <div class="modal fade" id="modal">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">添加/编辑学员</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="form" class="g-3 row" autocomplete="off" novalidate>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">姓名：</label>
                  <input type="text" name="name" class="form-control" placeholder="请输入姓名" />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">性别：</label>
                  <div class="input">
                    <div class="form-check d-inline-block">
                      <input value="0" checked id="cb01" class="form-check-input" type="radio" name="gender" />
                      <label for="cb01" class="form-check-label">男</label>
                    </div>
                    <div class="form-check d-inline-block">
                      <input value="1" id="cb02" class="form-check-input" type="radio" name="gender" />
                      <label for="cb02" class="form-check-label">女</label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">年龄：</label>
                  <input type="text" name="age" class="form-control" placeholder="请输入年龄" />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">组号：</label>
                  <input type="text" name="group" class="form-control" placeholder="请输入1-8组号" />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">期望薪资：</label>
                  <input type="text" name="hope_salary" class="form-control" placeholder="请输入期望薪资" />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">就业薪资：</label>
                  <input type="text" name="salary" class="form-control" placeholder="请输入就业薪资" />
                </div>
              </div>
              <div class="col-sm-12">
                <div class="form-group">
                  <label class="input-group-label">籍贯：</label>
                  <div class="input pl-0">
                    <select class="form-select custom-select" name="province">
                      <option value="">--省份--</option>
                    </select>
                    <select class="form-select custom-select" name="city">
                      <option value="">--城市--</option>
                    </select>
                    <select class="form-select custom-select" name="area">
                      <option value="">--地区--</option>
                    </select>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-blue" id="submit">确认</button>
          </div>
        </div>
      </div>
    </div>
    <script src="./bootstrap/bootstrap.min.js"></script>
    <script src="./lib/axios.js"></script>
    <script src="./lib/form-serialize.js"></script>
    <script src="./js/common.js"></script>
    <script>
      renderList()
      // 调接口 获取服务器数据 渲染到页面
      async function renderList() {
        const res = await axios({url : '/students'})
        console.log( '服务器返回的数据' , res)

        // 遍历数组 渲染到页面
        document.querySelector('.list').innerHTML = res.data.map(item => {
          const {id , name , gender , age , group , hope_salary , salary , province , city , area} = item
          return `
                      <tr>
                      <td>${name}</td>
                      <td>${age}</td>
                      <td>${gender === 0 ? '男' : '女'}</td>
                      <td>第${group}组</td>
                      <td>${hope_salary}</td>
                      <td>${salary}</td>
                      <td>${province}${city}${area}</td>
                      <td data-id=${id}>
                        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
                      </td>
                    </tr> 
          `
        }).join('')
        // 右上角一共有多少学生
        document.querySelector('.total').innerHTML = res.data.length
      }


      /*********************删除功能*********************/
      // 注册点击事件 动态数据 用事件委托
      document.querySelector('tbody').addEventListener('click' , async function (e) {
        if (!e.target.classList.contains('bi-trash')) {
          return
        }
        // 获取id
        const id = e.target.parentNode.parentNode.dataset.id 
        console.log(id)

        try{
          await axios ({
            url : `/students/${id}`,
            method : 'delete'
          })

          renderList()
        }catch(error){
          alert('删除失败')
        }
      })



    /*********************添加功能*********************/

      // 单击加号 显示模态框
      const modalBox = document.querySelector('#modal')
      const modalObj = new bootstrap.Modal(modalBox)

      // 给加号注册点击事件
      document.querySelector('#openModal').addEventListener('click' , function () {
        // 显示模态框
        modalObj.show()
        // 修改标题
        document.querySelector('.modal-title').innerHTML = '添加学员'
        // 清空表单
        document.querySelector('form').reset()

        // 给模态框设置自定义属性 提前规划
        modalBox.dataset.id = 'add'
      })

      // 获取模态框的省市区表桥
      const pSelect = document.querySelector('[name=province]')
      const cSelect = document.querySelector('[name=city]')
      const aSelect = document.querySelector('[name=area]')


      // 设置省市区下拉表单 
      initProvince()
      // 获取省份数据 渲染到省份下拉表单
      async function initProvince() {
       const {data:pArr} = await axios({ url : '/api/province'})
        // console.log(pArr)
        pSelect.innerHTML = '<option value="">--省份--</option>' + pArr.map(item => {
          return `<option value="${item}">${item}</option>`
        }).join('')
      }
      // 给省份下拉表单注册change事件
      pSelect.addEventListener('change' , async function () {
          // console.log(11)
          // const n = pSelect.value
          console.log(pSelect.value)
          const {data:cArr} = await axios({
            url : '/api/city',
            params : {
              pname : pSelect.value
            }
          })
          // console.log(cArr);
          cSelect.innerHTML = '<option value="">--城市--</option>' + cArr.map(item => {
          return `<option value="${item}">${item}</option>`
          }).join('')

          aSelect.innerHTML = '<option value="">--地区--</option>' 
        })
      // 给市区下拉表单注册change事件
      cSelect.addEventListener('change' , async function () {
          console.log(cSelect.value);
          const {data:aArr} = await axios({
            url : '/api/area',
            params : {
              pname : pSelect.value,
              cname : cSelect.value
            }
          })

          // console.log(aArr);

          aSelect.innerHTML = '<option value="">--地区--</option>' + aArr.map(item => {
          return `<option value="${item}">${item}</option>`
          }).join('')

        })


      // 给添加功能的模态框里的确认按钮 添加点击事件 
      document.querySelector('#submit').addEventListener('click' , async function () {
        // 获取模态框的所有数据
        const data = serialize(document.querySelector('form') , {hash : true , empty : true})
        // console.log(data)
        // 类型转换(接口要求的)
        data.age = +data.age
        data.gender = +data.gender
        data.group = +data.group
        data.hope_salary = +data.hope_salary
        data .salary = +data.salary
        // 调接口 增
        if (modalBox.dataset.id === 'add') {
              try{
              await axios({
                url : '/students',
                method : 'post',
                data
              })
              alert('添加成功')
              // 重新渲染
              renderList()
              // 关闭模态框
              modalObj.hide()
            }catch (error) {
                alert('添加失败')
            }
        }else{
          try{
            await axios({
              url : `/students/${modalBox.dataset.id}`,
              method : 'put',
              data
            })
            // 关闭模态框
            modalObj.hide()
            // 重新渲染
            renderList()
          }catch(error) {
            alert('修改失败')
          }
        }
      })


      /*********************修改内容*********************/
      // 给修改按钮注册点击事件
      document.querySelector('tbody').addEventListener('click' ,async function (e) {
        if (!e.target.classList.contains('bi-pen')) return

        // console.log(11);
        // 让修改按钮的模态框显示
        modalObj.show()
        document.querySelector('.modal-title').innerHTML = '编辑学员'

        const id = e.target.parentNode.parentNode.dataset.id
        // console.log(id);
        modalBox.dataset.id = id
        
        // 调接口 获取点击编辑的学生信息
        const {data:userInfo} = await axios({url : `/students/${id}`})
        // console.log(userInfo);
        // 回显到模态框

        // 获取表单中所有带有name属性的标签 生成一共伪数组 用[...数组]转化为真数组 
        const ipts = [...document.querySelectorAll('form [name]')]
        // 遍历获取的数组
        ipts.forEach(item => {
          // console.log(item);
          const k = item.name
          if (k === 'gender') {
            console.log(document.querySelector(`input[value='${userInfo.gender}']`));
            document.querySelector(`input[value='${userInfo.gender}']`).checked = true
          }else{
            item.value = userInfo[k]
          }
        })


        // 遍历完毕 城市和区县没有回显成功 原因是城市和区县没有选项 设置value无效 
        // 解决 获取用户所在省下面的城市和区县 渲染 再设置value
        const {data:cArr} = await axios({
            url : '/api/city',
            params : {
              pname : userInfo.province
            }
          })
          // console.log(cArr);
          cSelect.innerHTML = '<option value="">--城市--</option>' + cArr.map(item => {
          return `<option value="${item}">${item}</option>`
          }).join('')

          // 给城市下拉表单 重新设置value
          cSelect.value = userInfo.city

          // 区县同理
          const {data:aArr} = await axios({
            url : '/api/area',
            params : {
              pname : userInfo.province,
              cname : userInfo.city
            }
          })
          aSelect.innerHTML = '<option value="">--地区--</option>' + aArr.map(item => {
          return `<option value="${item}">${item}</option>`
          }).join('')
          aSelect.value = userInfo.area
      })
    </script>
  </body>
</html>
